<template>
  <div class="attStatus">
    <!-- 筛选搜索区域 -->
    <user-search
      :search="search"
      :labval="labval"
      :add="add"
      :do-not-search="notSearch"
      @onSearch="toSearch"
      @resetForm="resetForm"
      @addStatus="addStatus"
    />
    <!-- 表格 -->
    <div class="statusTable">
      <data-table
        :tableheader="tableheader"
        :datatable="tableData"
        :loading="loading"
        :operation="operation"
        @deleteData="deleteData($event)"
      />
    </div>
    <!-- 分页 -->
    <pagination
      :page="page"
      :count="count"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></pagination>
    <!-- 添加状态弹窗 -->
    <add-dialog
      :title="statusDialogTitle"
      :dialogvisible="statusDialog"
      @closeDialog="closeStatusDialog()"
      @determine="determineStatus()"
    >
      <template v-slot:add-content>
        <el-form
          ref="statusForm"
          :model="statusForm"
          label-width="90px"
          :rules="rules"
        >
          <el-form-item label="状态名称:" prop="statusId">
            <el-select
              v-model="statusForm.statusId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in labval"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则设置:" prop="endTime">
            <span v-if="statusForm.statusId == ''">-</span>
            <span v-if="statusForm.statusId == '3'">无打卡记录</span>
            <div v-else-if="statusForm.statusId == '2'" class="late">
              <el-time-picker
              v-model="statusForm.startTime"
              style="width: 119px"
              placeholder="开始时间段"
              >
            </el-time-picker>
              <span class="time-to">至</span>
              <el-time-picker
              v-model="statusForm.endTime"
              style="width: 119px"
              placeholder="结束时间段"
              >
            </el-time-picker>
              <span class="time-to">之间打卡</span>
            </div>
            <div v-else-if="statusForm.statusId == '1' || statusForm.statusId == '6'" class="late">
              <el-time-picker
              v-model="statusForm.endTime"
              style="width: 119px"
              placeholder="时间段"
              >
              </el-time-picker>
              <span class="time-to">之前打卡</span>
            </div>
            <div v-else-if="statusForm.statusId == '4' || statusForm.statusId == '5'" class="late">
              <el-time-picker
                v-model="statusForm.endTime"
                style="width: 119px"
                placeholder="时间段"
                >
              </el-time-picker>
              <span class="time-to">之后打卡</span>
            </div>
          </el-form-item>
        </el-form>
      </template>
    </add-dialog>
    <!-- 考勤删除弹窗 -->
    <add-dialog
      :title="deleteDialogTitle"
      :dialogvisible="deleteDialog"
      @closeDialog="closedeleteDialog()"
      @determine="determineDelete()"
    >
      <template v-slot:add-content>
        <span>是否确定删除该考勤状态。</span>
      </template>
    </add-dialog>
  </div>
</template>

<script>
import UserSearch from "@/views/components/search";
import dataTable from "@/views/components/dataTable";
import addDialog from "@/views/components/addDialog";
import pagination from "@/views/components/pagination";
import { changeDate } from "@/util/dateUtil.js"
export default {
  components: {
    UserSearch,
    dataTable,
    addDialog,
    pagination,
  },
  data() {
    return {
      loading: false, // 加载开关
      notSearch: true, // 是否不需要搜索框
      statusDialogTitle: "添加状态", // 添加状态弹窗标题
      deleteDialogTitle: "删除考勤状态", //  删除考勤状态弹窗标题
      statusDialog: false, // 添加状态弹窗
      deleteDialog: false, // 删除考勤状态弹窗
      deleteId: '', // 删除行的ID
      // 搜索对象
      search: {
        type: "",
      },
      // 下拉框的值
      labval: [
        {
          label: "签到正常",
          value: "1",
        },
        {
          label: "迟到",
          value: "2",
        },
        {
          label: "早退",
          value: "6",
        },
        {
          label: "迟到转事假",
          value: "4",
        },
        {
          label: "签退正常",
          value: "5",
        },
        {
          label: "缺卡",
          value: "3",
        },
      ],
      // 添加按钮
      add: [
        {
          name: "添加状态",
          click: "addStatus",
        },
      ],
      // 添加状态表单
      statusForm: {
        statusId: "",
        startTime: "",
        endTime: "",
        ruleTime: ""
      },
      // 表头
      tableheader: [
        {
          label: "序号",
          prop: "id",
          width: "280",
          issort: false, //用于判断是否排序
        },
        {
          label: "状态名称",
          prop: "name",
          width: "300",
          issort: false,
        },
        {
          label: "规则设置",
          prop: "ruleTemplate",
          width: "350",
          issort: false,
        },
        {
          label: "添加时间",
          prop: "createTime",
          width: "312",
          issort: false,
        },
      ],
      // 数据列表
      tableData: [],
      // 数据表操作项
      operation: {
        isedit: false,
        isdelete: true,
      },
      // 分页
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      count: 0, // 总数据量
      rules: {
        statusId: [
          {
            required: true,
            message: "用户姓名和规则设置不能为空",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "规则设置不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getStatusList(this.page.pageNum, this.page.pageSize);
  },
  methods: {
    // 获取状态列表数据
    async getStatusList(pageSum, pageSize, name) {
      this.loading = true;
      let res = await this.$http.get("/rule/list", {
        params: {
          name: name || "",
          pageNum: pageSum || 1,
          pageSize: pageSize || 10,
        },
      });
      this.loading = false;
      if (res.code == 0) {
        this.count = res.data.count;
        this.tableData = res.data.list;
      } else {
        this.$message.error("获取数据出错");
      }
    },
    // 搜索按钮
    toSearch() {
      let name;
      let status = this.search.type;
      this.labval.forEach((element) => {
        if (status == element.value) {
          name = element.label;
        }
      });
      this.getStatusList(1, 10, name);
    },
    // 重置按钮
    resetForm() {
      this.search.type = "";
      this.handleCurrentChange(1);
    },
    // 添加状态按钮
    addStatus() {
      this.statusDialog = true;
    },
    // 关闭添加状态弹窗
    closeStatusDialog() {
      this.$refs["statusForm"].resetFields();
      this.statusDialog = false;
      this.statusForm.statusName = "";
    },
    // 确认添加状态按钮
    determineStatus() {
      this.$refs["statusForm"].validate((valid) => {
        if (valid) {
          let name;
          let template;
          let status = this.statusForm.statusId;
          let endTime = changeDate(this.statusForm.endTime, 2);
          this.labval.forEach((element) => {
            if (status == element.value) {
              name = element.label;
            }
          });
          if(this.statusForm.statusId == "2") {
            let startTime = changeDate(this.statusForm.startTime, 2)
            template = startTime + '至' + endTime + '之间打卡';
          }else if(this.statusForm.statusId == "1" || this.statusForm.statusId == "6") {
            template = '在' + endTime + '之前打卡';
          }else if(this.statusForm.statusId == "4" || this.statusForm.statusId == "5") {
            template = '在' + endTime + '以后打卡';
          }else{
            template = '无打卡记录';
          }
          this.$http.post('/rule/saveOrUpdate', {
            name,
            template
          }).then(res => {
            if(res.code == 0) {
              this.$message({
                message: res.message,
                type: 'success'
              });
            }
            this.statusForm.statusId = '';
            this.statusForm.startTime = '';
            this.statusForm.endTime = '';
            this.getStatusList();
            this.statusDialog = false;
          })
        } else {
          return false;
        }
      });
    },
    // 删除按钮
    deleteData(row) {
      this.deleteId = row.id;
      this.deleteDialog = true;
    },
    // 删除弹窗确定按钮
    determineDelete() {
      this.$http.post('/rule/delete', {
        id: this.deleteId
      }).then( res => {
        if(res.code == -1) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.getStatusList();
          this.deleteDialog = false;
        }
      })
    },
    // 删除弹窗关闭按钮
    closedeleteDialog() {
      this.deleteId = '';
      this.deleteDialog = false;
    },
    // 页面数量改变时触发事件
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getStatusList(this.page.pageNum, val);
    },
    // 当前页改变时触发事件
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getStatusList(val, this.page.pageSize);
    },
  },
};
</script>

<style lang="scss">
.attStatus {
  padding: 15px;
  .late{
      display: inline-block;
      .time-to{
        padding: 0 5px;
      }
  }
}
</style>